<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>QQ音乐</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/carousel.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	</head>

	<body>
		<div class="web">
			<header>
				<span></span>
				<a>下载APP</a>
			</header>
			<div class="content">
				<ul class="List">
					<li class="active">推荐</li>
					<li>排行榜</li>
					<li>搜索</li>
				</ul>
				<!---推荐选项卡---->
				<div class="recommand card">
					<!--轮播图-->
					<div class="carousel_wrap">
						<div class="lunbo_wrap">
							<!--轮播图的容器-->
							<ul class="pic_box">
								<li><img src="img/lunbo1.jpg" /></li>
								<li><img src="img/lunbo2.jpg" /></li>
								<li><img src="img/lunbo3.jpg" /></li>
								<li><img src="img/lunbo4.jpg" /></li>
								<li><img src="img/lunbo5.jpg" /></li>
							</ul>
							<!--底部的控制点-->
							<ul class="pannel"></ul>
							<!--左右箭头-->
							<span id="left_arrow">&lt;</span>
							<span id="right_arrow">&gt;</span>
						</div>
					</div>
					<div class="recommand_wrap" id="radio_w">
						<!-----电台----->
						<h6>电台</h6>
						<!--<div class="radio">
							<a>
								<img src="https://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg?max_age=2592000" />
								<i class="iconfont icon-iconset0481" id="ee"></i>
								<p>热歌</p>
							</a>
						</div>-->
					</div>
					<!----热门歌单---->
					<div class="hot_wrap recommand_wrap" id="hot_h">
						<h6>热门歌单</h6>
						<!--<div class="hot radio">
							<a>
								<img src="https://y.gtimg.cn/music/photo_new/T006R300x300M00000333So02drvak.jpg?max_age=2592000" />
								<div class="tb">
									<i class="iconfont icon-erji"></i>
									<span>798.0w万</span>
									<i class="iconfont icon-iconset0481"></i>
								</div>
								<p>催泪大杀器！盘点演唱会经典万人大合唱</p>
								<p>Harry</p>
							</a>
						</div>-->
					</div>
					<!--底部-->
					<footer>
						<p>去客户端发现更多好音乐 <i class="iconfont icon-youjiantou"></i></p>
						<div class="bot">
							<a>查看电脑版网页</a>
							<span>QQ音乐</span>
							<p>Copyright©1998-2018Tencent.AllRightsReserved. </p>
							<p>联系电话：0755-86013388 QQ群：55209235</p>
						</div>
					</footer>
				</div>
				<!---排行榜选项卡--->
				<div class="phb card">
					<!--<div class="pop">
						<a>
						<div class="left">
							<img src="img/pop.jpg" />
							<span><i class="iconfont icon-erji">1930.0万</i></span>
						</div>
						<div class="mid">
							<h6>安利XS·巅峰榜·流行指数</h6>
							<ul>
								<li>1.山海 (Live)<span>-华晨宇</span></li>
								<li>2.追梦赤子心 (Live)<span>-张韶涵</span></li>
								<li>3.屋顶着火<span>-宋茜</span></li>
							</ul>
						</div>
						<div class="right">
							<i class="iconfont icon-youjiantou"></i>
						</div>
						</a>
					</div>-->
					<!--<p>去客户端发现更多好音乐 ></p>-->
				</div>
				<!----搜索选项卡--->
				<div class="search card">
					<!--搜索框-->
					<div class="search_wrap">
						<div class="kk">
							<form action="" method="post">
								<i class="iconfont icon-icon--"></i>
								<input type="text" placeholder="搜索歌曲、歌单、专辑" />
							</form>
						</div>
						<span class="qx">取消</span>
					</div>
						<div class="H_search">
							<h6>热门搜索</h6>
							<p class="color">梦想的声音第二季</p>
							<p>JUST LIKE THIS </p>
							<p>像我这样的人 </p>
							<p>普通DISCO </p>
							<p>我们不一样 </p>
							<p>PSYCHO </p>
							<p>毛不易 </p>
						</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var lis = document.querySelectorAll(".content .List li")
			console.log(lis);
			var div = document.querySelectorAll(".card")
			for (let i = 0; i < lis.length; i++) {
				lis[i].addEventListener("click", function() {
					for (var j = 0; j < div.length; j++) {
						div[j].style.display = "none";
						lis[j].classList.remove("active")
					}
					div[i].style.display = "block";
					lis[i].classList.add("active")
				})
			}
		</script>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/carousel.js"></script>
		<script type="text/javascript">
			new lunbo(".carousel_wrap", 280 / 700);
		</script>
        <script type="text/javascript">
            var r=document.querySelector("#radio_w");
            var h=document.querySelector("#hot_h");
//          console.log(r)
        	var xhr=new XMLHttpRequest();
        	var domain=" https://www.easy-mock.com/mock/5aa77cbf2b0894377fc7663e";
        	xhr.open("GET",domain+"/tuijian")
        	xhr.send();
        	xhr.addEventListener("readystatechange",function(){
        		if(xhr.readyState==4&&xhr.status==200){
        			var obj=JSON.parse(xhr.response);
//      			console.log(obj);
//      			console.log(obj.data.radioList);
        			obj.data.radioList.forEach(function(el,index){
        				var t=`<div class="radio">
						        <a>
								    <img src="${el.picUrl}?max_age=2592000" />
								    <i class="iconfont icon-iconset0481" id="ee"></i>
								    <p>${el.Ftitle}</p>
							    </a>
						    </div>`
						r.innerHTML+=t;    
        			})
        			obj.data.songList.forEach(function(el,index){
        				var z=`<div class="hot radio">
							<a href="//y.qq.com/w/taoge.html?ADTAG=myqq&from=myqq&channel=10007100&id=${el.id}">
								<img src="${el.picUrl}?max_age=2592000" />
								<div class="tb">
									<i class="iconfont icon-erji"></i>
									<span>${el.accessnum}</span>
									<i class="iconfont icon-iconset0481"></i>
								</div>
								<p>${el.songListDesc}</p>
								<p>${el.songListAuthor}</p>
							</a>
						</div>`
					h.innerHTML+=z;
        			})
        		}
        		})
        		var phb=document.querySelector(".phb");
        		var xhr1=new XMLHttpRequest();
        		xhr1.open("GET",domain+"/paihangbang")
        		xhr1.send()
        		xhr1.addEventListener("readystatechange",function(){
        			if(xhr1.readyState==4&&xhr1.status==200){
        				var res=JSON.parse(xhr1.response);
        				console.log(res);
                        res.data.topList.forEach(function(el,index){
//      				console.log(el.songList);
                            	var x=`<div class="pop">
                            	        <a href="https://y.qq.com/w/toplist.html?ADTAG=myqq&from=myqq&channel=10007100&id=${el.id}&type=top">
						                <div class="left">
							                <img src="${el.picUrl}?max_age=2592000" />
							                <span><i class="iconfont icon-erji">${el.listenCount}</i></span>
						                </div>
						                <div class="mid">
							                <h6>${el.topTitle}</h6>
							                <ul>
								                <li>${p(el.songList)}</li>
							                </ul>
						                </div>
						               <div class="right">
							                <i class="iconfont icon-youjiantou"></i>
						                </div>
						                </a>
					                </div>`
					    phb.innerHTML+=x;
                        })
                        function p(list){
                        	var x="";
                        	list.forEach(function(ele){
                        		x+=`<li>${ele.songname}<span>-${ele.singername}</span></li>`
                        	})
                        	return x;
                        }
        			}
        		})
        </script>
        <script type="text/javascript">
        	var d=document.querySelector(".kk");
        	var span=document.querySelector(".qx")
        	var se=document.querySelector(".H_search")
        	d.addEventListener("click",function(){
        		d.style.width="75%";
        		span.style.display="inline-block";
        		se.style.display="none"
        	})
        	span.addEventListener("click",function(){
        		d.style.width="90%";
        		span.style.display="none";
        		se.style.display="block"
        	})
        </script>
	</body>

</html>